<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>信易游</title>
  <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/mui/3.4.0/js/mui.js"></script>
  <link href="./css/admin_approval.css" rel="stylesheet">
  <script type="text/javascript">
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth
          if (!clientWidth) return
          docEl.style.fontSize = 75 * (clientWidth / 375) + 'px'
        }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
    //mui阻止了url跳转
    // mui(document).on('tap', 'a', function () {
    //   var a = document.createElement('a')
    //   a = this.cloneNode(true)
    //   a.click()
    // })
  </script>
</head>
<body class="admin-approval">
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: rgba(46,46,46,0.60);"></a>
  <h1 class="mui-title">信易游</h1>
</header>
<div class="mui-content">
  <div id="slider" class="mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
	  <a class="mui-control-item" href="#item1">
		待借
	  </a>
	  <a class="mui-control-item" href="#item2">
		待领
	  </a>
	  <a class="mui-control-item" href="#item3">
		待还
	  </a>
	  <a class="mui-control-item" href="#item4">
		已完成
	  </a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
	<div class="mui-slider-group">
	  <div id="item1" class="mui-slider-item mui-control-content mui-active">
		<div class="admin-approval-search">
		  <div class="mui-input-row">
			<input type="search" placeholder="输入姓名或服务编号">
			<span class="admin-search-icon mui-icon mui-icon-search"></span>
		  </div>
		</div>
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  <li class="mui-table-view-cell">
			<img class="mui-media-object mui-pull-left" src="./images/images_umbrella.png">
			<div class="mui-media-body">
			  <div class="mui-table">
				<div class="mui-table-cell mui-col-xs-6">
				  自动折叠雨伞
				</div>
				<div class="mui-table-cell mui-col-xs-6 mui-text-right">
				  <span class="mui-h6">2017/12/12 10:23</span>
				</div>
			  </div>
			  <div class='mui-ellipsis'>借物人：张三 (34012347****)</div>
			  <div class='mui-ellipsis'>服务编号：1231234</div>
			</div>
			<div class="mui-table">
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#reject" class="admin-btn admin-btn-reject admin-btn-left">拒绝审批</a>
			  </div>
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#approval" class="admin-btn admin-btn-approval admin-btn-right">通过审批</a>
			  </div>
			</div>
		  </li>
		  <li class="mui-table-view-cell">
			<img class="mui-media-object mui-pull-left" src="./images/images_umbrella.png">
			<div class="mui-media-body">
			  <div class="mui-table">
				<div class="mui-table-cell mui-col-xs-6">
				  自动折叠雨伞
				</div>
				<div class="mui-table-cell mui-col-xs-6 mui-text-right">
				  <span class="mui-h6">2017/12/12 10:23</span>
				</div>
			  </div>
			  <div class='mui-ellipsis'>借物人：张三 (34012347****)</div>
			  <div class='mui-ellipsis'>服务编号：1231234</div>
			</div>
			<div class="mui-table">
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#reject" class="admin-btn admin-btn-freeze admin-btn-left">操作后状态</a>
			  </div>
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#approval" class="admin-btn admin-btn-freeze admin-btn-right">操作后状态</a>
			  </div>
			</div>
		  </li>
		  <li class="mui-table-view-cell">
			<img class="mui-media-object mui-pull-left" src="./images/images_umbrella.png">
			<div class="mui-media-body">
			  <div class="mui-table">
				<div class="mui-table-cell mui-col-xs-6">
				  自动折叠雨伞
				</div>
				<div class="mui-table-cell mui-col-xs-6 mui-text-right">
				  <span class="mui-h6">2017/12/12 10:23</span>
				</div>
			  </div>
			  <div class='mui-ellipsis'>借物人：张三 (34012347****)</div>
			  <div class='mui-ellipsis'>服务编号：1231234</div>
			</div>
			<div class="mui-table">
			  <div class="admin-tag-left">
				<span class="admin-tag">异常</span>
			  </div>
			  <div class="admin-desc">
				原因：物品受损
			  </div>
			</div>
		  </li>
		</ul>
	  </div>
	  <div id="item2" class="mui-slider-item mui-control-content">
		<div class="admin-approval-search">
		  <div class="mui-input-row">
			<input type="search" placeholder="输入姓名或服务编号">
			<span class="admin-search-icon mui-icon mui-icon-search"></span>
		  </div>
		</div>
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  <li class="mui-table-view-cell">
			<img class="mui-media-object mui-pull-left" src="./images/images_umbrella.png">
			<div class="mui-media-body">
			  <div class="mui-table">
				<div class="mui-table-cell mui-col-xs-6">
				  自动折叠雨伞
				</div>
				<div class="mui-table-cell mui-col-xs-6 mui-text-right">
				  <span class="mui-h6">2017/12/12 10:23</span>
				</div>
			  </div>
			  <div class='mui-ellipsis'>借物人：张三 (34012347****)</div>
			  <div class='mui-ellipsis'>服务编号：1231234</div>
			</div>
			<div class="mui-table">
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#reject" class="admin-btn admin-btn-reject admin-btn-left">拒绝审批</a>
			  </div>
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#approval" class="admin-btn admin-btn-approval admin-btn-right">通过审批</a>
			  </div>
			</div>
		  </li>
		</ul>
	  </div>
	  <div id="item3" class="mui-slider-item mui-control-content">
		<div class="admin-approval-search">
		  <div class="mui-input-row">
			<input type="search" placeholder="输入姓名或服务编号">
			<span class="admin-search-icon mui-icon mui-icon-search"></span>
		  </div>
		</div>
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  <li class="mui-table-view-cell">
			<img class="mui-media-object mui-pull-left" src="./images/images_umbrella.png">
			<div class="mui-media-body">
			  <div class="mui-table">
				<div class="mui-table-cell mui-col-xs-6">
				  自动折叠雨伞
				</div>
				<div class="mui-table-cell mui-col-xs-6 mui-text-right">
				  <span class="mui-h6">2017/12/12 10:23</span>
				</div>
			  </div>
			  <div class='mui-ellipsis'>借物人：张三 (34012347****)</div>
			  <div class='mui-ellipsis'>服务编号：1231234</div>
			</div>
			<div class="mui-table">
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#reject" class="admin-btn admin-btn-reject admin-btn-left">拒绝审批</a>
			  </div>
			  <div class="mui-table-cell mui-col-xs-6">
				<a href="#approval" class="admin-btn admin-btn-approval admin-btn-right">通过审批</a>
			  </div>
			</div>
		  </li>
		</ul>
	  </div>
	  <div id="item4" class="mui-slider-item mui-control-content">
		<div class="admin-approval-search">
		  <div class="mui-input-row">
			<input type="search" placeholder="输入姓名或服务编号">
			<span class="admin-search-icon mui-icon mui-icon-search"></span>
		  </div>
		</div>
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  <li class="mui-table-view-cell">
			<img class="mui-media-object mui-pull-left" src="./images/images_umbrella.png">
			<div class="mui-media-body">
			  <div class="mui-table">
				<div class="mui-table-cell mui-col-xs-6">
				  自动折叠雨伞
				</div>
				<div class="mui-table-cell mui-col-xs-6 mui-text-right">
				  <span class="mui-h6">2017/12/12 10:23</span>
				</div>
			  </div>
			  <div class='mui-ellipsis'>借物人：张三 (34012347****)</div>
			  <div class='mui-ellipsis'>服务编号：1231234</div>
			</div>
			<div class="mui-table">
			  <div class="admin-tag-left">
				<span class="admin-tag">异常</span>
			  </div>
			  <div class="admin-desc">
				原因：物品受损
			  </div>
			</div>
		  </li>
		</ul>
	  </div>
	</div>
  </div>
</div>
<div id="reject" class="mui-popover mui-popover-bottom mui-popover-action ">
  <!-- 可选择菜单 -->
  <div class="mui-popover-title">请选择拒绝审批的理由</div>
  <ul class="mui-table-view">
	<li class="mui-table-view-cell">
	  <a href="#reject">物品库存不足</a>
	</li>
	<li class="mui-table-view-cell">
	  <a href="#reject">原因2</a>
	</li>
	<li class="mui-table-view-cell">
	  <a href="#reject">原因3</a>
	</li>
  </ul>
  <!-- 取消菜单 -->
  <ul class="mui-table-view">
	<li class="mui-table-view-cell">
	  <a href="#reject">取消</a>
	</li>
  </ul>
</div>
</body>
</html>